<!--流程管理-->
<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">体系管理系统</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <span>放个列表</span>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="height: 79vh;overflow: auto">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="体系文件" name="first">是因为空吗</el-tab-pane>
              <el-tab-pane label="审核问题管理" name="second">
                <div style="text-align: right;margin-right: 5px">
                  <el-link>录入问题</el-link>
                </div>
                <div style="margin-top: 5px">
                  <el-table
                      :data="toExamineProblem"
                      border
                      style="width: 100%">
                    <el-table-column
                        prop="dateUse"
                        label="审核日期">
                    </el-table-column>
                    <el-table-column
                        prop="problem"
                        label="问题描述">
                    </el-table-column>
                    <el-table-column
                        prop="problemPhoto"
                        label="照片明细">
                    </el-table-column>
                    <el-table-column
                        prop="type1"
                        label="问题分类1">
                    </el-table-column>
                    <el-table-column
                        prop="type2"
                        label="问题分类2">
                    </el-table-column>
                    <el-table-column
                        prop="clause"
                        label="条款编号">
                    </el-table-column>
                    <el-table-column
                        prop="fileName"
                        label="文件名称">
                    </el-table-column>
                    <el-table-column
                        prop="examineName"
                        label="审核人">
                    </el-table-column>
                    <el-table-column
                        prop="rectify"
                        label="纠正措施">
                    </el-table-column>
                    <el-table-column
                        prop="precaution"
                        label="预防措施">
                    </el-table-column>
                    <el-table-column
                        prop="department"
                        label="责任部门">
                    </el-table-column>
                    <el-table-column
                        prop="headUse"
                        label="责任人">
                    </el-table-column>
                    <el-table-column
                        prop="examineUse"
                        label="审核">
                    </el-table-column>
                    <el-table-column
                        prop="ratifyUse"
                        label="批准人">
                    </el-table-column>
                    <el-table-column
                        prop="leaveMessage"
                        label="留言">
                    </el-table-column>
                    <el-table-column
                        prop="finishSign"
                        label="完成标记">
                    </el-table-column>
                    <el-table-column
                        prop="motivate"
                        label="激励说明">
                    </el-table-column>
                    <el-table-column
                        prop="evidence"
                        label="证据上传">
                    </el-table-column>
                    <el-table-column
                        prop="deleteSign"
                        label="删除标记位">
                    </el-table-column>
                    <el-table-column
                        prop="establishTime"
                        label="创建时间">
                    </el-table-column>
                    <el-table-column
                        prop="updateTime"
                        label="修改时间">
                    </el-table-column>
                    <el-table-column
                        prop="editName"
                        label="编辑人姓名">
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="模型说明" name="third">模型说明</el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small">中  文</el-button>
            <el-button plain size="small">Русский язык</el-button>
            <el-button plain size="small">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <el-dialog
        :title="titleUse"
        :visible.sync="problemDialog"
        width="570px"
        :before-close="handleClose">
      <div>
        <el-form :inline="true" :model="toExamineProblemForm" class="demo-form-inline" label-width="100px">
          <div>
            <el-form-item label="问题描述：">
              <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="toExamineProblemForm.problem"
                  style="width: 410px">
              </el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="审核时间：">
              <el-date-picker
                  v-model="toExamineProblemForm.dateUse"
                  type="date"
                  placeholder="选择日期"
                  style="width: 150px">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="审核人：">
              <el-input v-model="toExamineProblemForm.examineName" style="width: 150px"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="责任部门：">
              <el-select v-model="toExamineProblemForm.department" filterable placeholder="请选择" style="width: 150px">
                <el-option
                    v-for="item in departmentOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上传照片：">
              <el-button style="width: 150px">点击上传</el-button>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="体系文件：">
              <el-select v-model="toExamineProblemForm.systemOptions" filterable placeholder="请选择" style="width: 150px">
                <el-option
                    v-for="item in systemOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="体系条款：">
              <el-input style="width: 150px" v-model="toExamineProblemForm.clause"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="problemDialog = false">取 消</el-button>
    <el-button type="primary" @click="problemDialog = false">确 定</el-button>
  </span>
    </el-dialog>
    <!--抽屉放置区域-->
  </div>
</template>

<script>

import {departmentOptions, systemOptions} from "@/configUse";

export default {
  name: "toExamineProblem",
  components: {},
  data() {
    return {
      activeName:'first',
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限
      //审核问题的大表，
      toExamineProblem:[
        {
          //主键
          id:'',
          //审核日期
          dateUse:'',
          //问题描述
          problem:'',
          //照片明细
          problemPhoto:'',
          //问题分类1
          type1:'',
          //问题分类2
          type2:'',
          //条款编号
          clause:'',
          //体系名称
          fileName:'',
          //体系名称（英文）
          fileNameEnglish:'',
          //体系名称（俄语）
          fileNameRussian:'',
          //审核人
          examineName:'',
          //纠正措施
          rectify:'',
          //预防措施
          precaution:'',
          //责任部门
          department:'',
          //责任人
          headUse:'',
          //审核
          examineUse:'',
          //批准人
          ratifyUse:'',
          //留言
          leaveMessage:'',
          //完成标记
          finishSign:'',
          //激励说明
          motivate:'',
          //证据上传
          evidence:'',
          //删除标记位
          deleteSign:'',
          //创建时间
          establishTime:'',
          //修改时间
          updateTime:'',
          //编辑人姓名
          editName:'',
        }
      ],
      //审核问题的表单编辑变量
      toExamineProblemForm:{
        //主键
        id:'',
        //审核日期
        dateUse:'',
        //问题描述
        problem:'',
        //照片明细
        problemPhoto:'',
        //问题分类1
        type1:'',
        //问题分类2
        type2:'',
        //条款编号
        clause:'',
        //体系名称
        fileName:'',
        //体系名称（英文）
        fileNameEnglish:'',
        //体系名称（俄语）
        fileNameRussian:'',
        //审核人
        examineName:'',
        //纠正措施
        rectify:'',
        //预防措施
        precaution:'',
        //责任部门
        department:'',
        //责任人
        headUse:'',
        //审核
        examineUse:'',
        //批准人
        ratifyUse:'',
        //留言
        leaveMessage:'',
        //完成标记
        finishSign:'',
        //激励说明
        motivate:'',
        //证据上传
        evidence:'',
        //删除标记位
        deleteSign:'',
        //创建时间
        establishTime:'',
        //修改时间
        updateTime:'',
        //编辑人姓名
        editName:'',
      },
      //审核问题的点击行变量Scope格式
      toExamineProblemScope:null,
      //弹窗变量
      //弹窗的提示
      titleUse:'提示',
      //编辑问题的弹窗
      problemDialog:false,
      //部门选择器变量：
      departmentOptions:departmentOptions,
      //体系文件的选择变量
      systemOptions:systemOptions,
    }
  },
  watch: {},
  methods: {
    //退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'changeModel',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.changeModel
          this.useId=useId
          console.log(this.useId,this.usePower,this.useName)
        }
      })
    },
    //在tab控件上单击的函数
    handleClick(tab, event) {
      console.log(tab,event);
    },
    //同样，关闭弹窗的显示
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    }
  },
  mounted() {
    this.inquiry()
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/
</style>